<!DOCTYPE html>
<html lang="en">
#parse('base/head.html')
<!--<style type="text/css">-->
	<!--#gview_family-member-list .ui-jqgrid-bdiv {-->
		<!--max-height: 530px!important;-->
	<!--}-->
	<!--#gbox_family-member-list {-->
		<!--max-width: 100%;-->
	<!--}-->
<!--</style>-->
<body class="no-skin">

<div class="main-container ace-save-state" id="main-container">

    <div class="fp-framework main-content">
        <div class="main-content-inner">
            <div class="page-content">
				<div class="hidden" >
					<input class="col-xs-12 col-sm-10" type="text"  id="form-field-villageId" placeholder="villageId" value="$!{villageId}" />
					<input class="col-xs-12 col-sm-10" type="text"  id="form-field-townId" placeholder="townId" value="$!{townId}" />
				</div>
                <div class="row">
                    
                    <div class="col-sm-12">

						<div class="row col-md-12 fp-toolbar fpxmList" >
							<form method="POST"  enctype="multipart/form-data" id="form1" action="$!webPath/basicData/uploadFamilyExcel" class="pt-7">
								
								<div class="col-sm-6">
									<input type="file" class="form-control search-query" id="form1-field-upfile" name="upfile" placeholder="贫困户信息Excel文件" >
								</div>
								<div class="col-sm-4 pt-7">
									<button type="button" id="uploadBtn" class="btn btn-primary btn-sm"><span class="ace-icon fa fa-upload icon-on-right bigger-110"></span>上传</button>
								</div>
								
							</form> 
						</div>
						<div class="row col-md-12 fp-toolbar fpxmList" >
							<form method="POST"   id="form2">
							<select class="chosen-select form-control" name="townId" id="form-field-town-id" data-placeholder="镇(乡)">
								<option value="">全部</option>
								#foreach($townInfoPO in $townInfoPOList)
								<option value="$!{townInfoPO.townId}">$!{townInfoPO.townName}</option>
								#end
							</select>
							<select class="chosen-select form-control" name="villageId" id="form-select-villageId" data-placeholder="行政村">
								<option value="">全部</option>
							</select>
							<div class="input-group" >
								<input type="hidden" class="form-control search-query" name="test">
								<input type="text" class="form-control search-query" name="name" id="form-field-person-name" placeholder="户主名称" >
							</div>
							<div class="input-group" >
								<span class="input-group-btn">
									<button type="button" id="formSearchBtn" class="btn btn-primary btn-sm"><span class="ace-icon fa fa-search icon-on-right bigger-110"></span>查询</button>
								</span>
								<span class="input-group-btn">
									<button type="button" id="exportExcelBtn" class="btn btn-primary btn-sm"><span class="ace-icon fa fa-download icon-on-right bigger-110"></span>导出</button>
								</span>
								<span class="input-group-btn">
									<button type="button" id="fmDeleteBtn" class="btn btn-danger btn-sm"><span class="ace-icon fa fa-trash-o icon-on-right bigger-110"></span>删除</button>
								</span>
								
							</div>
							</form>
						</div>

                        <div class="row">
                            <div class="col-sm-12"  style="overflow-x:auto">
                            	#if(${resultVO.code}==0)
                            		共处理$!{resultVO.total}条数据，成功$!{resultVO.succ}条，失败$!{resultVO.fail}条<br>
                            	#end
                                $!{resultVO.errorMsg}
                            </div>
                        </div>




                        <div class="row">
                            <div class="col-sm-12"  style="overflow-x:auto">
                                <table id="family-member-list"></table>
                                <div id="family-member-list-pager"></div>
                            </div>
                        </div>
						
						
												
                    </div>
					
					<div class="col-sm-12">
						<!-- 模态框（Modal） -->
						<div class="modal fade bs-example-modal-lg" id="uploadResultModal" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false" aria-labelledby="upload_detail_title_id" aria-hidden="true">
							<div class="modal-dialog modal-lg" >
								
								<div class="modal-content" style="height: 600px;overflow: auto;">
									<div class="modal-header hide">
										<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
										</button>
									</div>
									<div class="modal-body center " style="overflow: auto;">
										<div style="clear:both"></div>
										<div style="height:400px;">
											<div class="fp-loading">
											 <i class="fa fa-spinner fa-pulse fa-3x"></i>
											 <p>数据上传中，请耐心等待</p>
											</div>
										</div>
									</div>
									<div class="modal-footer hide">
										
									</div>
								</div><!-- /.modal-content -->
							</div><!-- /.modal -->
						</div>
					</div>	
					
					
					
					<div class="col-sm-12">
						<!-- 模态框（Modal） -->
						<div class="modal fade bs-example-modal-lg" id="familyDetailModal" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false" aria-labelledby="pro_detail_title_id" aria-hidden="true">
							<div class="modal-dialog modal-lg" >
								
								<div class="modal-content" style="height: 600px;overflow: auto;">
									<div class="modal-header hide">
										<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
										</button>
									</div>
									<div class="modal-body center " style="overflow: auto;">
										<div style="clear:both"></div>
										<div style="height:400px;">
											<div class="fp-loading">
											 <i class="fa fa-spinner fa-pulse fa-3x"></i>
											 <p>数据加载中，请耐心等待</p>
											</div>
										</div>
									</div>
									<div class="modal-footer hide">
										
									</div>
								</div><!-- /.modal-content -->
							</div><!-- /.modal -->
						</div>
					</div>	
					
					<div class="col-sm-12">
						<div id="dialog-message" class="hide" title="操作结果">
							<h5 class="widget-main">操作成功. </h5>
						</div>
					</div>
					
                <div/>
            </div>
        </div><!-- /.page-content -->
    </div>
</div>
#parse('base/footer.html')
<script>
    //JS校验form表单信息  
	function checkUploadData(){  
		var fileDir = $("#form1-field-upfile").val();  
		var suffix = fileDir.substr(fileDir.lastIndexOf("."));  
		if("" == fileDir){  
			$.msgErrorAlert("选择需要导入的Excel文件！");
			//alert("选择需要导入的Excel文件！");  
			return false;  
		}  
		if(".xls" != suffix && ".xlsx" != suffix ){  
			$.msgErrorAlert("选择Excel格式的文件导入！");
			//alert("选择Excel格式的文件导入！");  
			return false;  
		}  
		return true;  
	}  
    jQuery(function ($) {
        $("#uploadBtn_bak").on('click',function () {
        	console.log("uploadBtn click");
            if(checkUploadData()){  
				$('#form1').ajaxSubmit({    
					url:'$!webPath/basicData/uploadFamilyExcel',  
					dataType: 'text',  
					success: resutlMsg,  
					error: errorMsg  
				});   
				function resutlMsg(msg){  
					$.msgInfoAlert(msg);
					//alert(msg);     
					$("#upfile").val("");  
				}  
				function errorMsg(){   
					$.msgErrorAlert("导入excel出错！");
					//alert("导入excel出错！");      
				}  
			} 
        });

        
        $('#form1-field-upfile').ace_file_input({
			style: 'well',
			btn_choose: '拖动文件到这里...或点击上传',
			btn_change: null,
			no_icon: 'ace-icon fa fa-cloud-upload',
			droppable: true,
			thumbnail: 'small'//large | fit
			//,icon_remove:null//set null, to hide remove/reset button
			/**,before_change:function(files, dropped) {
				//Check an example below
				//or examples/file-upload.html
				return true;
			}*/
			/**,before_remove : function() {
				return true;
			}*/
			,
			preview_error : function(filename, error_code) {
				//name of the file that failed
				//error_code values
				//1 = 'FILE_LOAD_FAILED',
				//2 = 'IMAGE_LOAD_FAILED',
				//3 = 'THUMBNAIL_FAILED'
				//alert(error_code);
				console.log("preview_error");
			}
	
		}).on('change', function(){
			//console.log($(this).data('ace_input_files'));
			//console.log($(this).data('ace_input_method'));
			console.log("改变");
		});
        
        
        $("#uploadBtn").on('click',function () {
        	console.log("uploadBtn click");
            if(checkUploadData()){  
				$('#form1').submit();   
				$('#uploadResultModal').modal('show');
			} 
        });
        
        $("#exportExcelBtn").on('click',function () {
        	console.log("exportExcelBtn click");
        	var url = '$!webPath/basicData/doExcelExport?';
	  		var params = $('#form2').serialize();
	  		params = decodeURIComponent(params,true);
	  	    params = encodeURI(encodeURI(params));
	  		url += params;
	  		console.log(params);
	  		console.log(url);
	  		var w  = window.open(url,'_blank');   
 			//w.location.href = url;
 			
        });
        
        
        
        
    });
	
</script>

<script>
    jQuery(function ($) {
        $("#formSearchBtn").on('click',function () {
        	console.log("formSearchBtn click");
            reloadGridData();
        });

    });

</script>
<!-- 贫困户及成员列表 -->
<script type="text/javascript">
    function reloadGridData() {
		console.log("reloadGridData...");
        jQuery("#family-member-list").jqGrid('setGridParam',{
            datatype:'json',
			mtype : "POST",
            postData:{'name':$("#form-field-person-name").val(),
                'townId':$("#form-field-town-id  option:selected").val()
			}, //发送数据
            page:1
        }).trigger("reloadGrid");
    }

	
	var parentBodyHeight = $('#left-gov-tree', window.parent.document).height()||800;
    console.log(parentBodyHeight);
    //var pkh_parent_column = $("#family-member-list").closest('[class*="col-"]').closest('h4');
    var widget_header = $(".fpxmList");
	    //resize to fit page size
    $(window).on('resize.jqGrid', function () {
        $("#family-member-list").jqGrid( 'setGridWidth', widget_header.width()-24 );
    });
    function detailClick_family(familyId,familyMemeberId,rowId){
        //window.location.href = ("$!webPath/fpxm/detail?projectId="+projectId);
		//打开模态窗口
		//console.log("清空模态详情");
		$('#familyDetailModal').children().remove(); 
		//console.log("显示加载信息...");
		$('#familyDetailModal').append('<div class="modal-dialog modal-lg " ><div class="modal-content" style="height: 600px;overflow: auto;"><div class="modal-header hide"></div><div class="modal-body center " ><div style="clear:both"></div><div style="height:400px;"><div class="fp-loading"><i class="fa fa-spinner fa-pulse fa-3x"></i><p>数据加载中，请耐心等待</p></div></div></div><div class="modal-footer hide"></div></div></div>'); 
		//console.log("加载模态详情");
		$('#familyDetailModal').modal({keyboard:false,backdrop:"static",remote:"$!webPath/basicData/familyDetail?familyId="+familyId+"&familyMemeberId="+familyMemeberId+"&rowId="+rowId});
    };
    
    //初始化模态窗口
    jQuery(function($) {
		//v2
		$("#familyDetailModal").on("hidden", function() {  
			$(this).removeData("modal");  
			console.log("familyDetailModal hidden ");
			
		});  
		//v3
		$("#familyDetailModal").on("hidden.bs.modal", function() {  
			$(this).removeData("bs.modal");
			/*modal页面加载$()错误,由于移除缓存时加载到<span style="color: rgb(51, 51, 255);"><div class="modal-content"></div></span>未移除的数据，手动移除加载的内容*/
			$(this).find(".modal-content").children().remove(); 
			console.log("familyDetailModal hidden.bs.moda ");
		}); 
	});
	
    $("#family-member-list").jqGrid({
        url : '$!webPath/basicData/qryFamilyAndMembers',
        datatype : "json",
		mtype : "POST",
        height : parentBodyHeight-210,
		shrinkToFit:false,  
		autoScroll: true, 
        //autowidth: true,
        colNames : ['','id','镇(乡)','行政村','户编号','人编号','姓名','性别','证件号码','人数','与户主关系','民族','文化程度',
				'在校生状况','健康状况','劳动技能','务工状况','务工时间（月）','是否参加新型农村合作医疗',
				'是否参加新型农村社会养老保险','是否参加城镇职工基本养老保险','脱贫属性','贫困户属性','主要致贫原因',
				'人均纯收入','联系电话','开户银行名称','银行卡号'],
        colModel : [
            //{name : 'xh',index : 'xh',width : 50},
            {name : 'myac',index : '', width:80, fixed:true, sortable:false, resize:false,
//								formatter:'actions',
                formatter: function (cellvalue, options, rowObject) {
                    //console.log(options.rowId);  
                    var detail='<div style="cursor: pointer;">';
                    detail += '<i class="normal-icon ace-icon block-inherit blue " onclick="detailClick_family(' + rowObject.familyId +',' + rowObject.familyMemeberId +',' +options.rowId +')">编辑</i>';
                    detail += '</div>';
                    return detail;
                }

            },
            {name : 'familyMemeberId',key:true,hidden:true}, 
            {name : 'townName',index : 'townName',width:95,sortable : false},
            {name : 'villageName',index : 'villageName',width:120,sortable : false},
            {name : 'familyCode',index : 'familyCode',width:95,sortable : false},
            {name : 'personCode',index : 'personCode',width:110,sortable : false},
			{name : 'name',index : 'name',width:95,sortable : false},
			{name : 'genderName',index : 'genderName',width:55,sortable : false},
			{name : 'idNumber',index : 'idNumber',width:155,sortable : false},
			{name : 'personNum',index : 'personNum',width:95,sortable : false},
			{name : 'masterRelName',index : 'masterRelName',width:95,sortable : false},
			{name : 'nationName',index : 'nationName',width:95,sortable : false},
			{name : 'educationLevelName',index : 'educationLevelName',width:95,sortable : false},
			{name : 'studentStateName',index : 'studentStateName',width:95,sortable : false},
			{name : 'healthStateName',index : 'healthStateName',width:95,sortable : false},
			{name : 'healthStateName',index : 'healthStateName',width:95,sortable : false},
			{name : 'workStateName',index : 'workStateName',width:95,sortable : false},
			{name : 'workMonths',index : 'workMonths',width:95,sortable : false},
			{name : 'isNrcmsName',index : 'isNrcmsName',width:95,sortable : false},
			{name : 'isEndowmentName',index : 'isEndowmentName',width:95,sortable : false},
			{name : 'isCityEndowmentName',index : 'isCityEndowmentName',width:95,sortable : false},
			{name : 'povertyStateName',index : 'povertyStateName',width:95,sortable : false},
			{name : 'povertyAttrName',index : 'povertyAttrName',width:95,sortable : false},
			{name : 'mainReasonName',index : 'mainReasonName',width:95,sortable : false},
			{name : 'avgIncome',index : 'avgIncome',width:95,sortable : false},
			{name : 'tel',index : 'tel',width:95,sortable : false},
			{name : 'bankName',index : 'bankName',width:192,sortable : false},
			{name : 'accountCode',index : 'accountCode',width:170,sortable : false}


        ],
        jsonReader : {
            root : "resultList",
            page : "page",
            total : "totalPages",
            records : "totalRecords",
            rows : "resultList"
        },
        rowNum:10,
        rowList:[10,20,50,100],
        pager: '#family-member-list-pager',
        viewrecords : true,
        loadComplete : function() {
			var table = this;
			setTimeout(function(){
				styleCheckbox(table);
				
				updateActionIcons(table);
				updatePagerIcons(table);
				enableTooltips(table);
			}, 0); 

			$(table).siblings(".norecords").remove(); 
			var rowNum = parseInt($(table).getGridParam("records"), 10);   
			if (rowNum <= 0) {   
				$(table).parent().append("<div  class=\"norecords\">没有数据...</div>");
				$(table).siblings(".norecords").show(); 								
			} 
        },

        multiselect : true
    });

    
    $("#family-member-list").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "scroll"});
</script>
<script>
    jQuery(function ($) {
    	$("#fmDeleteBtn").on('click',function () {
        	console.log("fmDeleteBtn click");
        	var ids = $("#family-member-list").jqGrid('getGridParam','selarrrow');
			//console.log(ids);
			console.log(ids.join(','));
			if(ids.length==0){
				$.msgWarnAlert("请选择待删除的记录.");
				return;
			}
			$.msgConfirm("提示","确定要删除所选的记录吗?",function(){
				$.ajax({
					type: "POST",
					datatype:'json', 
					url: "$!webPath/basicData/deleteFamilyMembers",
					data: {
						ids: ids.join(',')
					},
					success: function (resultData) {
						console.log(resultData);
						reloadGridData();
						//var resultVO = $.parseJSON(resultData);
						var resultVO = resultData;
						if(0==resultVO.code){
							var dialog = $( "#dialog-message" ).removeClass('hide').dialog({
								modal: true,
								buttons: [ 
									
									{
										text: "确定",
										"class" : "btn btn-primary btn-minier",
										click: function() {
											$( this ).dialog( "close" ); 
										} 
									}
								]
							});
						}
						if(0<resultVO.code){
							$.msgErrorAlert("发生异常!");
							//alert("发生异常！"); 
						}
					},
					error: function (data) {
						$.msgErrorAlert("发生异常,"+data.msg);
						//alert("发生异常,"+data.msg);
					}
				});
			},function(){
				
			})
			
 			
        });

    });

</script>
<script>
    jQuery(function ($) {
    	$("#form-field-town-id").change(function () {  
            var ss = $(this).children('option:selected').val(); 
            $("#form-select-villageId").empty();
            var option = $("<option>").val("").text("全部");
            $("#form-select-villageId").append(option);
            if(""==ss){
            	
            	
            }else{
            	$.ajax({
    				type: "POST",
    				datatype:'json', 
    				url: "$!webPath/subsystem/base/villageinfo/queryVillagesByTown",
    				data: {
    					townId: ss
    				},
    				success: function (resultData) {
    					console.log(resultData);
    					//var resultVO = $.parseJSON(resultData);
    					$.grep(resultData,function(villagePO){
    						console.log(villagePO);
    						 // 实际的应用中，这里的option一般都是用循环生成多个了
    			            var option = $("<option>").val(villagePO.villageId).text(villagePO.villageName);
    			            $("#form-select-villageId").append(option);
    					});
    				},
    				error: function (data) {
    					$.msgErrorAlert("获取行政村列表时发生异常.");
    					//alert("获取行政村列表时发生异常.");
    				}
    			});
            }
        });  
    	
    	
    });

</script>

</body>
</html>
